<template>
<div>
    <div class="banner" @click="handlehra">
        <img :src="bannerImg" alt="" class="banner-img">
        <div class="banner-info">
            <div class="banner-title">wwwwwwwwwwwwww</div>
            <div class="banner-number">
                <span class="iconfont">&#xe780;</span><span class="iconfont">&#xe660;</span>{{this.gallaryImgs.length}}</div>
        </div>
    </div>
    <fade>
     <grallary @close="handlehraclose" :imgs="gallaryImgs" v-show="showgra"></grallary> 
     </fade>
 </div>
  
</template>

<script>
import grallary from 'common/gallary/gallary'
import fade from 'common/fade/fade'

 export default {
     props:{
    sightName:String,
    bannerImg:String
    ,
    gallaryImgs:Array
},
   data () {
     return {
         img:[
              'https://cdn4.buysellads.net/uu/1/41369/1544727215-bigstock-1.jpg',"https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2492824357,3972972521&fm=58"
         ],
         showgra:false
     }
   },
   methods:{
    handlehra () {
        this.showgra =true
    },
    handlehraclose () {
         this.showgra =false
    }
   },
   components: {
        grallary,
        fade
   }
 }
</script>
<style lang="stylus" scoped>
    .banner{
        overflow hidden
        position relative
        height 0
        width 100%
        padding-bottom 55%
    }
    .banner-img{
        width 100%;

    }
    .banner-info{
        background-image linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8))
        display flex
        position absolute
        left 0
        right 0
        bottom 0
        line-height 10px
        color white

    }
    .banner-title{
        flex 1

    }
    .banner-number{
        padding 5px
        height 10px
        line-height 10PX
        border-radius 11px
        background rgba(0,0,0,.6)
        
    }
</style>
